<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>llygrid demo</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
  
   <script src="../../../jquery.js" type="text/javascript"></script>
   <script src="../../../common.js" type="text/javascript"></script>
   <link   href="../../../../themes/mobile/style.css" type="text/css" rel="stylesheet" />
   
   <script src="../jquery.listselectdialog.js" type="text/javascript"></script>

   <script type="text/javascript">

	$(function(){
		var treeGridSelect = {
				title:'用户选择页面',//页面显示标题
				//labelField:'#ddd',valueField:'#'
				defaults:[{value:'1',label:'广东省'},{value:'11',label:'广州市'}],//默认值
				key:{value:'ID',label:'TEXT'},//对应value和label的key
				multi:false,
				grid:{
					title:"用户选择",
					params:{
						sqlId:'grid.demo'
					},
					CommandName : 'java.page.command',
					columns:[//显示列
						{align:"center",key:"ID",label:"编号",query:true,width:"30%"},
						{align:"center",key:"TEXT",label:"名称",query:true,width:"30%"}
					]
				},
				tree:{
					title:"组织选择",
					method : 'post',
					asyn : true, //异步
					rootId  : 'root',
					rootText : '行政区域',
					gridKey:"id",
					CommandName : 'java.tree.command',
					params : {
						daoBeanName:'dao',
						sqlId : 'asyn.tree.demo',
						childSqlId : 'asyn.tree.demo.child',
						parentId : 'root',
						testId:'1234'
					}
				}
		} ;
		
		$(".tree-grid-s-select").listselectdialog( $.extend({},treeGridSelect,{multi:false}) ) ;
		$(".tree-grid-m-select").listselectdialog( $.extend({},treeGridSelect,{multi:true}) ) ;

		var treeSelect = {
				title:'用户选择页面',//页面显示标题
				dataSource:'dao',
				defaults:{value:'黎明,123,黎明1',label:'黎明11,12311,黎明111',split:','},//默认值
				key:{value:'id',label:'text'},//对应value和label的key
				multi:true,
				tree:{
					title:"组织选择",
					method : 'post',
					asyn : true, //异步
					rootId  : 'root',
					rootText : '根节点',
					CommandName : 'java.tree.command',
					params : {
						daoBeanName:'dao',
						sqlId : 'asyn.tree.demo',
						childSqlId : 'asyn.tree.demo.child',
						parentId : 'root',
						testId:'1234'
					}
				}
		    } ;

		$(".tree-s-select").listselectdialog( $.extend({},treeSelect,{multi:false}) ) ;
		$(".tree-m-select").listselectdialog( $.extend({},treeSelect,{multi:true}) ) ;

		var gridSelect = {
				title:'用户选择页面',//页面显示标题
				dataSource:'dao',
				//{value:'黎明,123,黎明1',label:'黎明11,12311,黎明111',split:','}
				//[{value:''}]
				defaults:[{value:'1',label:'广东省'},{value:'11',label:'广州市'}],//默认值
				key:{value:'ID',label:'TEXT'},//对应value和label的key
				multi:false,
				grid:{
					title:"用户选择",
					params:{
						sqlId:'grid.demo'
					},
					CommandName : 'java.page.command',
					columns:[//显示列
						{align:"center",key:"ID",label:"NAME",query:true,width:"10%"},
						{align:"center",key:"TEXT",label:"年龄",width:"10%"},
						{align:"center",key:"DESC",label:"备注",width:"10%"}
					]
				}
		   } ;

		$(".grid-s-select").listselectdialog( $.extend({},gridSelect,{multi:false}) ) ;
		$(".grid-m-select").listselectdialog( $.extend({},gridSelect,{multi:true}) ) ;

   	});
   </script>
   
   <style>
   		*{
   			font:12px "微软雅黑";
   		}
   </style>

</head>
<body>

<table>

<tr><td rowspan="1" colspan="1"></td></tr>
	</table>
	
	<input type="text" class="tree-grid-s-select" value="树列表单选选择"/><br/><br/>
	<input type="text" class="tree-grid-m-select" value="树列表多选选择"/><br/><br/>
	
	<input type="text" class="tree-s-select" value="树单选选择"/><br/><br/>
	<input type="text" class="tree-m-select" value="树多选选择"/><br/><br/>
	
	<input type="text" class="grid-s-select" value="列表单选选择"/><br/><br/>
	<input type="text" class="grid-m-select" value="列表多选选择"/><br/><br/>

	<div class="grid-content" style="margin:5px;">
	
	</div>
</body>
</html>
